<template>
    <div id="basicInformation_cpxx_index_" class="padding">
        <div class="block">
            <fieldset class="layui-elem-field site-demo-button">
                <legend>操作</legend>
                <div style="padding: 0px 10px 10px" action="">
                    <el-button type="success" :disabled="!operation.xz" @click="operation.xz?xz():''">新增商品</el-button>
                    <el-button type="warning" :disabled="!operation.cx" @click="operation.cx?cx():''">查询</el-button>
                </div>
            </fieldset>
            <div class="padding">
                <el-form :inline="true" ref="searchDatas_" :model="searchDatas">
                    <el-form-item label="选择分类" prop="dlxl">
                        <el-cascader
                                v-model="searchDatas.dlxl"
                                :options="classifyTree"
                                change-on-select
                                :props="props">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="供应商" prop="gys">
                        <el-input v-model="searchDatas.gys" style="width:220px" ></el-input>
                    </el-form-item>
                    <el-form-item label="商品产地" prop="spcd">
                        <el-input v-model="searchDatas.spcd" style="width:220px"></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称" prop="spmc">
                        <el-input v-model="searchDatas.spmc" style="width:220px"></el-input>
                    </el-form-item>
                    <el-form-item label="商品编码" prop="spbm">
                        <el-input v-model="searchDatas.spbm" style="width:220px"></el-input>
                    </el-form-item>
                    <el-form-item label="商品编码">
                        <el-button @click="resetForm('searchDatas_')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-row>
                <el-col :span="9">
                    <fieldset class="layui-elem-field">
                        <el-tree :data="classifyTree"
                                 node-key="id"
                                 :expand-on-click-node="false"
                                 :render-content="renderContent" :props="defaultProps" style="height:848px"></el-tree>
                    </fieldset>
                </el-col>
                <el-col :span="15">
                    <!--产品列表-->
                    <table id="splb" lay-filter="splb"></table>
                    <!--产品规格-->
                    <table id="spgg" lay-filter="spgg" style="margin-top: 20px"></table>
                    <script type="text/html" id="spggToolbar">
                        <button class="el-button el-button--success el-button--mini is-round" lay-event="edit">编辑</button>
                        <button class="el-button el-button--danger el-button--mini is-round" lay-event="del">删除</button>
                    </script>
                    <script type="text/html" id="spggTop">
                        <button class="el-button el-button--success el-button--mini is-round" lay-event="add">新增</button>
                        <button class="el-button el-button--primary el-button--mini is-round" lay-event="refresh">刷新</button>产品规格
                    </script>
                    <div style="display: none" id="addgg">
                        <el-form ref="saveggDatas" :rules="rules" :inline="true" :model="saveggDatas" class="padding">
                            <el-form-item label="产品id" prop="product_id" style="display: none">
                                <el-input v-model="saveggDatas.product_id" style="width: 300px"></el-input>
                            </el-form-item>
                            <el-form-item label="规格名称" prop="ggmc">
                                <el-input v-model="saveggDatas.ggmc" style="width: 300px"></el-input>
                            </el-form-item>
                            <br/>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('saveggDatas')">保存</el-button>
                                <el-button @click="$refs['saveggDatas'].resetFields()">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </div>
        <script type="text/html" id="toolbar">
            <button class="el-button el-button--success el-button--mini is-round" lay-event="edit">编辑</button>
            <button class="el-button el-button--danger el-button--mini is-round" lay-event="del">删除</button>
        </script>
        <div style="display: none" id="add">
            <v-add style="margin-left: 30px" v-bind:options="classifyTree"  v-bind:saveDatas="saveDatas" ></v-add>
        </div>
    </div>
</template>

<script>
    import add from "./add.vue"
    export default {
        name: "cpxx",
        components:{
          'v-add':add,
        },
        beforeCreate: function () {
            this.$nextTick(function () {
                this.searchTree();//查询商品分类
                this.searchSplb();//查询商品列表
                this.searchSpgg();//查询商品规格
            });
        },
        data() {
            var validateId = (rule, value, callback)=>{
                if (!value) {
                    this.$message({message:'请先选择相应的商品！',type:'error'});
                    return callback(new Error('请先选择相应的商品'));
                }else{
                    callback();
                }
            };
            return {
                operation: {//操作
                    xz: true,//新增
                    cx: true,//查询
                },
                searchDatas: {//查询条件
                    dlxl: [],
                    gys: '',
                    spcd: '',
                    spmc: '',
                    spbm: '',
                },
                saveDatas:{//新增或者修改的数据
                    dlxl:[],
                    spbm:"",
                    spmc:"",
                    spcd:"",
                    gys:"",
                    dj:"",
                    yhj:"",
                    bz:"",
                },
                classifyTree: [],//商品分类树
                props: {//分类树的内容
                    value: 'id',
                    label: 'label',
                    children: 'children'
                },
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                splbHeader:[//商品列表的头
                    {field: 'id',fixed: 'left',  title: '序列号',totalRowText: '合计：',sort:true,width:120}
                    , {field: 'spbm', title: '商品编码',width:120}
                    , {field: 'spmc', title: '商品名称',width:120}
                    , {field: 'spgg', title: '商品规格',width:120,event: 'spgg', unresize: true,style:'background-color: #009688; color: #fff;cursor: pointer;'}
                    , {field: 'sppp', title: '商品品牌',width:120}
                    , {field: 'spcd', title: '商品产地',width:120}
                    , {field: 'gys', title: '供应商',width:120}
                    , {field: 'dj', title: '单价',width:120}
                    , {field: 'yhj', title: '优惠价',width:120}
                    , {field: 'bz', title: '备注'}
                    , {fixed: 'right', width:200,title: '操作', align:'center', toolbar: '#toolbar'}
                ],
                saveggDatas:{
                    product_id:"",
                    id:"",
                    ggmc:""
                },
                rules:{
                    product_id: [
                        { validator: validateId, message: '', trigger: 'blur' },
                    ],
                    ggmc: [
                        { required: true, message: '请输入规格名称', trigger: 'blur' },
                    ],
                },
                spggHeader:[//商品规格的头
                    {field: 'id', title: '序列号', sort: true}
                    , {field: 'ggmc', title: '规格名称', sort: true}
                    , {fixed: 'right', width:200,title: '操作', align:'center', toolbar: '#spggToolbar'}
                ],
                multipleSelection: [],
                currentPage: 5,
            }
        },
        methods: {
            handleNodeClick(data) {//树的点击事件
                this.searchSplb("crm-product/product-list",{id: data.id});
            },
            xz: function () {//新增
                this.$cache_.flushData(this.saveDatas);
                this.saveDatas.dlxl = [];
                allIndex = this.$message_.layOpen("#add");
            },
            xg: function (obj) {//修改
                obj.data.dlxl = JSON.parse(obj.data.dlxl);
                this.saveDatas = obj.data;
                allIndex = this.$message_.layOpen("#add",()=>{
                    obj.data.dlxl = JSON.stringify(obj.data.dlxl)
                    obj.update(obj.data)
                });
            },
            cx: function () {//查询
                this.searchSplb("crm-product/product-search-list",{CrmMallProductSearch: this.searchDatas})
            },
            searchSplb:function (url="",datas={}) {//搜索商品列表
                noCheckCache = true;
                layui.use('table',() => {//加这个是防止刷新的时候会出现不存在render方法
                    this.$message_.layTable(this,url,'#splb',datas,this.splbHeader,550,'',true,(res)=>{
                        this.$message({message:'商品列表在右方菜单显示！',type:'success'});
                    });
                    //监听行工具事件
                    layui.table.on('tool(splb)', (obj) => {
                        switch(obj.event){
                            case 'edit':
                                this.xg(obj);
                                break;
                            case 'del':
                                layer.confirm("确认是否删除该条商品！",(index) => {
                                    this.$message_.postTips(this,"删除",'crm-product/delete',{id:obj.data.id},null,()=>{obj.del()})
                                    layer.close(index)
                                });
                                break;
                            case 'spgg'://监听单元格点击事件
                                this.saveggDatas.product_id = obj.data.id;
                                this.searchSpgg('crm-product/spgg-list',{product_id:obj.data.id})
                                break;
                        };
                    });
                });
            },
            searchSpgg:function (url="",datas={}) {//搜索商品规格
                noCheckCache = true;
                layui.use('table',() => {//加这个是防止刷新的时候会出现不存在render方法
                    this.$message_.layTable(this,url,'#spgg',datas,this.spggHeader,280,'#spggTop',true,(res)=>{
                        this.$message({message:'商品规格在下方菜单显示！',type:'success'});
                    });
                    //监听行工具事件
                    layui.table.on('tool(spgg)', (obj) => {
                        switch(obj.event){
                            case 'edit':
                                allType = 'edit'
                                this.xggg(obj);
                                break;
                            case 'del':
                                layer.confirm("确认是否删除该条商品规格！",(index) => {
                                    this.$message_.postTips(this,"删除",'crm-product/spgg-delete',{id:obj.data.id},null,()=>{obj.del()})
                                    layer.close(index)
                                });
                                break;
                        };
                    });
                    layui.table.on('toolbar(spgg)', (obj) => {
                        switch(obj.event){
                            case 'add':
                                allType = 'add'
                                this.xzgg();
                                break;
                            case 'refresh':
                                noCheckCache = true;
                                this.$message_.layTable(this,url,'#spgg',datas,this.spggHeader,280,'#spggTop',true);
                                break;
                        };
                    });
                });
            },
            xzgg: function () {//新增规格
                this.saveggDatas.ggmc = "";
                this.saveggDatas.id = "";
                allIndex = this.$message_.layOpen("#addgg",()=>{
                },'新增商品规格',['40%', '40%']);
            },
            xggg: function (obj) {//修改规格
                this.saveggDatas = obj.data;
                allIndex = this.$message_.layOpen("#addgg",()=>{
                    if (allSuccess=='success'){
                        obj.update(obj.data)
                    }
                },'修改商品规格',['40%', '40%']);
            },
            submitForm:function(datas) {
                this.$refs[datas].validate((valid) => {
                    if (valid) {
                        switch (allType){
                            case "add":
                                this.$message_.postTips(this,'新增','crm-product/spgg-save',{CrmMallProductSpecify:this.saveggDatas},null,(res)=>{
                                    if (res.data.res==1){
                                        layer.close(allIndex)
                                    }
                                });
                                break;
                            case "edit":
                                this.$message_.postTips(this,'修改','crm-product/spgg-save',{CrmMallProductSpecify:this.saveggDatas},null,(res)=>{
                                    if (res.data.res==1){
                                        layer.close(allIndex)
                                    }
                                });
                                break;
                        }
                        return false;
                    } else {
                        return false;
                    }
                });
            },
            searchTree:function () {//搜索商品列表
                this.$post('crm-product/all-classify',{},this)
                    .then((response) => {
                        if (response.data.res == 1) {//成功
                            this.classifyTree = response.data.data;
                        }
                    });
            },
            append(data) {//新增节点
                layer.prompt({title: '输入名称，并确认', formType: 2}, (label, i) => {
                    layer.close(i);
                    this.$message_.postTips(this,"新增商品分类",'crm-product/add-classify',{CrmMallProductClassify:{ flmc: label,parent_id:data.id}},null,(response)=>{
                        const newChild = { id:response.data.data.id,label: label, children: [],parent_id:data.id};
                        if (!data.children) {
                            this.$set(data, 'children', []);
                        }
                        data.children.push(newChild);
                    })
                });
            },
            remove(node, data) {//删除节点
                layer.confirm("确认是否删除该条商品分类！",(i) => {
                    layer.close(i)
                    this.$message_.postTips(this,"删除",'crm-product/delete-classify',{id:data.id},null,(response)=>{
                        const parent = node.parent;
                        const children = parent.data.children || parent.data;
                        const index = children.findIndex(d => d.id === data.id);
                        children.splice(index, 1);
                    })
                });
            },
            renderContent(h, { node, data, store }) {//渲染内容
                if (data.parent_id=="0"){
                    return (
                        <span class="custom-tree-node" style="flex:1">
                            <span style="float:left;margin-right:20px">
                                <a class="el-button el-button--text el-button--mini" style="color:black" size="mini" type="text" >{node.label}</a>
                            </span>
                            <span style="float:right;margin-right:20px">
                                <el-button size="mini" type="text" on-click={ () => this.handleNodeClick(data) }>查看商品</el-button>
                                <el-button size="mini" type="text" on-click={ () => this.append(data) }>新增</el-button>
                            </span>
                        </span>);
                } else{
                    return (
                        <span class="custom-tree-node" style="flex:1">
                            <span style="float:left;margin-right:20px">
                                <a class="el-button el-button--text el-button--mini" style="color:black" size="mini" type="text" >{node.label}</a>
                            </span>
                            <span style="float:right;margin-right:20px">
                                <el-button size="mini" type="text" on-click={ () => this.handleNodeClick(data) }>查看商品</el-button>
                                <el-button size="mini" type="text" on-click={ () => this.append(data) }>新增</el-button>
                                <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
                            </span>
                        </span>);
                }
            }
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .el-tree-node__content {
        display: -webkit-flex; /* Safari */
        flex: 1;
    }
    .custom-tree-node {
        flex: 1;
        width: 100%;
        display: flex;
        display: -webkit-flex; /* Safari */
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 20px;
    }
</style>